import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { Link } from 'react-router';

import { product as ProductConfig } from '../config/Common';

import * as UserActions from '../actions/UserActions';
import * as ProductActions from '../actions/ProductActions';

import {
  TabbedArea,
  TabPane
} from 'react-bootstrap';

import DialogCommon from '../components/DialogCommon';
import DialogAlert from '../components/dialog/DialogAlert';
import Container from '../components/Container';
import Telephone from '../components/Telephone';
import Product from '../components/Product';

class PocketApp extends React.Component {

  constructor () {
    super();  
    this.state = {
       dialogVisiable : false,
       dialogTitle : "",
       dialogContent : "",
       dialogButton : null,
       selectedTabKey : 1
    };  
  }

  static propTypes = {
    product: React.PropTypes.object.isRequired,
    dispatch: React.PropTypes.func.isRequired
  }

  fetchProduct (){
    let dataParam = {
        start : this.pageIndex, 
        limit : 1000,
        bossStatus : ProductConfig.productStatus.all,
        bossType: ProductConfig.productType.all
    };
    this.props.productAction.fetchProduct(dataParam);
  }

  componentDidMount(){
    let { product } = this.props;

    if (product.product_status !== 1) {
      this.fetchProduct();
    }
  }

  filterProductByType(){
    let { product } = this.props;
    let shortProduct, longProduct = null;
    if (product && product.results && product.results.length > 0) {

        shortProduct = []; 
        longProduct = [];

        for(let i = 0, len = product.results.length; i < len; i++){
            let productItem = product.results[i];
            //过滤掉已关注策略
            if (productItem.status != ProductConfig.productStatus.hasSign) {
              continue;
            }
            if (productItem.gstype == ProductConfig.productType.short) {
              shortProduct.push(productItem);
            }else{
              longProduct.push(productItem);
            }
        }
    }
    return { shortProduct, longProduct };
  }

  componentDidUpdate(){
    let { product } = this.props;
    if (product) {
      let { product_unsign_status = 0, message = "" } = product;

      product.product_unsign_status = 0;

      if (product_unsign_status === -1) {
          let dialogHeader = `系统提示`;
          let dialogContent  = <DialogAlert message={message}/>
          this.setState({
            dialogContent : dialogContent,
            dialogVisiable : true,
            dialogTitle : dialogHeader,
            dialogButton : [{
               text : "确定",
               style : "default"
            }]
          });
      }else if(product_unsign_status === 1){
        this.props.userAction.fetchUser();
      }
    }
  }

  getResultLabel(data, msg){
    let result  = (data && data.length === 0 )? msg : null;
    return result;
  }

  handleDialogHide(){
    this.setState({
       dialogVisiable : false
    });
  }

  handleTabSelect(index){
    this.setState({
      selectedTabKey : index
    });
  }

  render() {

    let { user, history, product } = this.props;

    let { shortProduct, longProduct } = this.filterProductByType();
    
    return (
          <Container 
              isGoBack={false} 
              isHeader={true} 
              isHeaderMessage={true}
              isFooter={true} 
              footerIndex={1} 
              headerTitle={"我的策略"}>

               <Telephone user={ user }/>

               <div className="product-container">
               
                  <TabbedArea activeKey={this.state.selectedTabKey} onSelect={ this.handleTabSelect.bind(this) }>
                    <TabPane eventKey={1} tab="短线策略">
                      {
                        product.product_status === 0 ?
                        <div className="text-center padding-lg">
                          { product.message }
                        </div> 
                        :
                        shortProduct && shortProduct.length > 0 ?
                        <Product 
                            products={ shortProduct } 
                            productType = { ProductConfig.productType.short }
                            productStatus = { ProductConfig.productStatus.hasSign}
                            user = { user }
                            history = { history }
                            productAction={ this.props.productAction }/>
                        :
                        <div className="text-center padding-lg">
                          { this.getResultLabel(shortProduct, `您暂未关注任何短线策略`) }
                        </div> 
                      }
                    </TabPane>

                    <TabPane eventKey={2} tab="中线策略">
                        {
                          product.product_status === 0 ?
                          <div className="text-center padding-lg">
                            { product.message }
                          </div> 
                          :
                          longProduct && longProduct.length > 0 ?
                          <Product 
                            products={ longProduct } 
                            productType = { ProductConfig.productType.long }
                            productStatus = { ProductConfig.productStatus.hasSign}
                            user = { user }
                            history = { history }
                            productAction={ this.props.productAction }/>
                          :
                          <div className="text-center padding-lg">
                            { this.getResultLabel(longProduct, `您暂未关注任何中线策略`) }
                          </div>
                        }
                    </TabPane>
                  </TabbedArea>
               </div>

               <DialogCommon 
                  title={ this.state.dialogTitle } 
                  content={ this.state.dialogContent } 
                  buttons = { this.state.dialogButton }
                  visiable={ this.state.dialogVisiable } 
                  onHide = { this.handleDialogHide.bind(this) }/>
               
          </Container>
    );
  }
}

export default connect(state => ({
    product: state.product,
    user: state.user
}), dispatch => ({
    productAction: bindActionCreators(ProductActions, dispatch),
    userAction: bindActionCreators(UserActions, dispatch)
}))(PocketApp);
